{% extends "base.html" %}
{% block content %}
<div class="bg-white rounded-lg shadow p-6 max-w-2xl mx-auto">
    <!-- 月份切换导航 -->
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold"><i class="fa fa fa-calendar-check-o"></i> 打卡记录</h2>
        <div class="flex items-center space-x-4">
            <a href="{{ url_for('clock_in', year=prev_year, month=prev_month) }}" 
               class="text-sm text-blue-600 hover:underline">
                &larr; {{ prev_year }}年{{ prev_month }}月
            </a>
            <span class="text-sm text-gray-500">
                {{ current_year }}年{{ current_month_num }}月（{{ current_month }}）
            </span>
            <a href="{{ url_for('clock_in', year=next_year, month=next_month) }}" 
               class="text-sm text-blue-600 hover:underline">
                {{ next_year }}年{{ next_month }}月 &rarr;
            </a>
        </div>
    </div>

    <!-- 日历头部：星期 -->
    <div class="grid grid-cols-7 gap-1 mb-2 text-center text-sm text-gray-500 font-medium">
        <div>周日</div>
        <div>周一</div>
        <div>周二</div>
        <div>周三</div>
        <div>周四</div>
        <div>周五</div>
        <div>周六</div>
    </div>

    <!-- 日历主体：日期网格 -->
    <div class="grid grid-cols-7 gap-1">
        {% for _ in range(month_start_weekday) %}
            <div class="h-16 flex items-center justify-center text-gray-200"></div>
        {% endfor %}
        {% for day in month_days %}
            {% set date_str = "%s-%02d-%02d" % (current_year, current_month_num, day) %}
            {% set is_today = (day == today_day and current_month_num == today_month and current_year == today_year) %}
            {% set is_clocked = date_str in clocked_dates %}
            
            <div class="h-16 flex items-center justify-center">
                <div 
                    class="w-10 h-10 rounded-full flex items-center justify-center transition-all duration-300
                        {% if is_clocked %}bg-green-500 text-white font-medium{% else %}bg-gray-100 text-gray-700{% endif %}
                        {% if is_today %}ring-2 ring-blue-500 ring-offset-2{% endif %}"
                    
                >
                    {{ day }}
                </div>
            </div>
        {% endfor %}
    </div>

    <!-- 隐藏打卡表单 -->
    <form method="POST" class="hidden">
        <input type="hidden" name="clock_date" id="clock_date">
    </form>

    <!-- 状态提示（含打卡天数统计） -->
    <div class="mt-6 p-4 bg-gray-50 rounded-lg">
        <!-- 本月打卡天数（红色突出） -->
        <div class="text-sm text-gray-600 mb-2">
            本月已打卡 
            <span class="font-semibold text-red-600">  <!-- 红色加粗 -->
                {{ clocked_count }}
            </span> 天
        </div>

        <!-- 原有图标说明 -->
        <div class="flex items-center text-sm text-gray-600">
            <div class="w-4 h-4 rounded-full bg-green-500 mr-2"></div>
            <span class="mr-6">已打卡</span>
            <div class="w-4 h-4 rounded-full bg-gray-100 border-2 border-blue-500 mr-2"></div>
            <span>今天</span>
        </div>

        <!-- 原有提示文本 -->
        <p class="mt-3 text-sm text-gray-500">
            提示：每天完成第一道题目后将自动打卡，已打卡日期显示为绿色。
        </p>
    </div>
</div>
{% endblock %}